<script setup>
const props = defineProps({
  mHeight: {
    type: String,
    default: '100%',
  },
});

const injectGlobalStyles = () => {
  const style = document.createElement('style');
  style.textContent = `
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body, html { height: 100%; font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; overflow-y: hidden; }
  `;
  document.head.appendChild(style);
};

injectGlobalStyles();
</script>

<template>
  <div class="bg-tech-pink" :style="{ minHeight: mHeight }">
    <slot></slot>
  </div>
</template>

<style scoped>
.bg-tech-pink {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4) fixed;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  color: white;
  position: relative;
  overflow-y: auto;
}

.bg-tech-pink::-webkit-scrollbar { width: 10px; }
.bg-tech-pink::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 5px; }
.bg-tech-pink::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 5px; transition: background 0.3s ease; }
.bg-tech-pink::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
</style>